<template>
  <div class="carbon-platform">
    <nav class="navbar sticky-top bg-white shadow-sm py-3">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center w-100">
          <!-- 网站标志 -->
          <div class="navbar-logo">
            <span class="logo-icon">🌱</span>
            <span class="logo-text">绿碳平台</span>
          </div>

          <!-- 中间导航链接 - 桌面版 -->
          <ul class="navbar-nav list-unstyled d-flex flex-row gap-3 gap-lg-5 justify-content-center flex-wrap align-items-center mb-0 fw-bold flex-grow-1 mx-4">
            <li class="nav-item">
              <a href="/index" class="nav-link text-dark hover:text-primary transition-colors">首页</a>
            </li>
            <li class="nav-item">
              <a href="/shop" class="nav-link text-dark hover:text-primary transition-colors">碳积分市场</a>
            </li>
            <li class="nav-item">
              <a href="/blog" class="nav-link text-dark hover:text-primary transition-colors">博客</a>
            </li>
            <li class="nav-item">
              <a href="/contact" class="nav-link text-dark hover:text-primary transition-colors">联系我们</a>
            </li>
            <li class="nav-item">
              <a href="/about" class="nav-link text-dark hover:text-primary transition-colors">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="/order" class="nav-link text-dark hover:text-primary transition-colors">我的订单</a>
            </li>
          </ul>

          <!-- 右侧功能区 - 使用emoji图标 -->
          <div class="d-flex align-items-center gap-4 gap-lg-5">
            <!-- 搜索按钮 -->
            <button class="btn p-2 text-dark hover:text-primary transition-colors" aria-label="搜索">
              <span class="fs-5">🔍</span>
            </button>

            <!-- 购物车 -->
            <a href="/cart" class="btn p-2 text-dark hover:text-primary transition-colors position-relative" aria-label="购物车">
              <span class="fs-5">🛒</span>
<!--              <span class="position-absolute top-0 right-0 btn-success text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" style="border-radius: 50%;">3</span>-->
            </a>

            <!-- 用户菜单 -->
            <div class="dropdown">
              <button class="btn p-2 text-dark hover:text-primary transition-colors" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="用户菜单">
                <span class="fs-5">👤</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/login">登录</a></li>
                <li><a class="dropdown-item" href="/register">注册</a></li>
                <li><a class="dropdown-item" href="/account">我的账户</a></li>
              </ul>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="btn d-lg-none p-2 text-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="菜单">
              <span class="fs-5">☰</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- Preloader -->
    <div class="preloader-wrapper" v-if="isLoading">
      <div class="preloader"></div>
    </div>

    <!-- 顶部横幅 -->
    <div class="banner-section">
      <div class="container">
        <div class="banner-content">
          <h1 class="banner-title">企业间碳积分交易平台</h1>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="about-page py-5">
      <div class="container-lg">
        <!-- 团队介绍 -->
        <section class="team-section mb-5">
          <h2 class="section-title mb-4">平台团队</h2>
          <div class="row row-cols-1 row-cols-md-5 g-4">
            <div class="col" v-for="member in teamMembers" :key="member.name">
              <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                  <h5 class="card-title">{{ member.name }}</h5>
                  <p class="card-text text-muted">软件工程</p>
                  <div class="expertise">
                    <span class="badge bg-light text-dark me-2" v-for="skill in member.skills" :key="skill">{{ skill }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 平台介绍 -->
        <section class="platform-intro mb-5">
          <h2 class="section-title mb-4">平台介绍</h2>
          <div class="card shadow-sm">
            <div class="card-body">
<!--              <p class="lead">企业间碳积分交易平台——连接绿色未来，是专业的企业级碳资产交易解决方案。</p>-->
              <p>我们致力于通过数字化技术促进碳资产流通，平台整合区块链存证、智能合约和大数据分析技术，打造安全透明的企业间碳积分交易生态系统。自2022年上线以来，已服务超过3000家企业，完成碳交易量突破500万吨CO₂e，合作减排项目超过200个。</p>

              <h5 class="mt-4">技术架构</h5>
              <div class="row g-4 mt-3">
                <div class="col-md-3" v-for="tech in technologies" :key="tech.name">
                  <div class="tech-card p-3 border rounded text-center">
                    <i class="fs-1 mb-3" :class="tech.icon"></i>
                    <h6>{{ tech.name }}</h6>
                    <small class="text-muted">{{ tech.desc }}</small>
                  </div>
                </div>
              </div>

              <h5 class="mt-5">核心优势</h5>
              <ul class="value-list">
                <li>区块链存证确保交易不可篡改，可信度100%</li>
                <li>智能匹配系统交易撮合效率提升60%</li>
                <li>全流程数字化审核时间缩短至24小时内</li>
                <li>碳资产溯源准确率100%，符合国际标准</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 平台特色 -->
        <!-- 平台特色 -->
        <section class="features-section mb-5">
          <h2 class="section-title mb-4">平台功能</h2>
          <!-- 改为与技术架构相同的网格布局 -->
          <div class="row g-4">
            <!-- 每个功能卡片使用与技术架构相同的尺寸 -->
            <div class="col-md-3" v-for="feature in allFeatures" :key="feature.title">
              <div class="tech-card p-3 border rounded h-100">
                <div class="text-center mb-3">
                  <span class="fs-2">{{ feature.icon }}</span>
                </div>
                <h6 class="text-center mb-2">{{ feature.title }}</h6>
                <small class="text-muted text-center d-block mb-2">{{ feature.desc }}</small>
                <div class="detail-list text-sm mt-2">
                  <div v-for="detail in feature.details" :key="detail">
                    <span class="d-block">{{ detail.key }}: {{ detail.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>


        <!-- 交易流程 -->
        <section class="supply-chain-section mb-5">
          <h2 class="section-title mb-4">碳交易流程</h2>
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="row g-4 text-center">
                <div class="col-md" v-for="step in transactionProcess" :key="step.title">
                  <div class="step-icon mb-3">
                    <i class="fs-1" :class="step.icon"></i>
                  </div>
                  <h6>{{ step.title }}</h6>
                  <small class="text-muted">{{ step.desc }}</small>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>

    <!-- 相关推荐部分 -->
    <section class="related-searches py-5 bg-light">
      <div class="container-lg">
        <h2 class="section-title mb-4">热门搜索</h2>
        <div class="d-flex flex-wrap gap-2 mb-5">
          <a href="#" class="fs-6 badge bg-white text-dark border px-3 py-2 text-decoration-none"
             v-for="item in relatedSearches" :key="item"
             @click.prevent="searchItem(item)">
            {{ item }}
          </a>
        </div>
      </div>
    </section>

    <!-- 页脚部分 -->
    <footer class="main-footer">
      <div class="container">
        <div class="footer-bottom">
          <p class="copyright">© 2025 绿碳平台 版权所有 | 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      isLoaded: false,
      orderItems: [
        { id: 1, projectName: '风力发电项目', amount: 1200, status: '已完成', price: 65.5 },
        { id: 2, projectName: '林业碳汇项目', amount: 850, status: '进行中', price: 72.3 }
      ],
      teamMembers: [
        { name: '何玉席', skills: ['碳市场分析', '政策研究'] },
        { name: '刘蔚杰', skills: ['区块链技术', '系统架构'] },
        { name: '周曼', skills: ['碳资产核算', '项目审核'] },
        { name: '倪张弛', skills: ['智能合约', '安全开发'] },
        { name: '李岳楚', skills: ['市场运营', '客户管理'] }
      ],
      technologies: [
        { name: '区块链存证', icon: 'bi-shield-lock', desc: '交易全程可追溯' },
        { name: '智能合约', icon: 'bi-file-earmark-text', desc: '自动执行交易' },
        { name: '碳核算引擎', icon: 'bi-calculator', desc: '精准排放量计算' },
        { name: '市场分析', icon: 'bi-bar-chart', desc: '实时行情监测' }
      ],
      allFeatures: [
        {
          title: '碳资产交易',
          icon: '🔄',
          desc: '企业间碳积分交易全流程管理',
          details: [
            { key: '挂牌交易', value: '灵活定价' },
            { key: '竞价拍卖', value: '高效配置' }
          ]
        },
        {
          title: '项目管理',
          icon: '📋',
          desc: '碳减排项目全生命周期管理',
          details: [
            { key: '项目备案', value: '在线审核' },
            { key: '减排监测', value: '实时采集' }
          ]
        },
        {
          title: '安全交易',
          icon: '🔒',
          desc: '全方位保障碳交易安全',
          details: [
            { key: '身份认证', value: '多维度核验' },
            { key: '资金托管', value: '第三方监管' }
          ]
        },
        {
          title: '市场分析',
          icon: '📊',
          desc: '专业碳市场数据分析工具',
          details: [
            { key: '价格走势', value: '实时监控' },
            { key: '交易预测', value: 'AI分析' }
          ]
        }
      ],
      transactionProcess: [
        { title: '企业认证', icon: 'bi-person-check', desc: '企业资质审核备案' },
        { title: '资产挂牌', icon: 'bi-tag', desc: '碳资产信息发布' },
        { title: '订单匹配', icon: 'bi-arrow-left-right', desc: '智能撮合交易' },
        { title: '合约执行', icon: 'bi-check2-all', desc: '自动完成交割' }
      ],
      relatedSearches: [
        '碳配额','自愿减排','碳汇项目','交易流程','区块链存证',
        '碳核算', '履约周期','CCER','VER','碳管理','绿色金融',
          '低碳','碳排放'
      ],
      // 计算属性数据
      totalAmount: 2050,
      avgPrice: 68.2,
      totalValue: 139810
    }
  },
  methods: {
    viewOrder(id) {
      // 查看订单详情逻辑
      this.$router.push(`/order/${id}`);
    },
    goToTransactions() {
      this.$router.push('/transactions');
    },
    searchItem(keyword) {
      // 搜索逻辑
      console.log('搜索:', keyword);
    }
  }
}
</script>

<style scoped>
.carbon-platform {
  font-family: 'Nunito', sans-serif;
}

.banner-section {
  background-image: url('../../public/images/banner-1.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 20px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.8);
}

.banner-title {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

@media (max-width: 768px) {
  .banner-section {
    height: 200px;
  }

  .banner-title {
    font-size: 2rem;
  }
}
.team-section .card-img-top {
  height: 250px;
  object-fit: cover;
}

.tech-card {
  transition: transform 0.3s;
  background: rgba(25, 135, 84, 0.05);
}
.tech-card:hover {
  transform: translateY(-5px);
}

.value-list {
  column-count: 2;
  column-gap: 2rem;
}

.detail-list dt {
  font-weight: 500;
  color: #198754;
}
.detail-list dd {
  margin-left: 1rem;
}
.detail-list span {
  padding: 2px 0;
  text-align: center; /* 新增这一行，使文本居中 */
  display: block; /* 确保span元素能正确应用text-align */
}

.supply-chain-section .step-icon {
  color: #198754;
}

@media (max-width: 768px) {
  .value-list {
    column-count: 1;
  }

  .team-section .card-img-top {
    height: 200px;
  }
}
</style>